{% extends "admin/base.html" %}
{% block title %}模板管理 - {{ problem.title }}{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
  <!-- 标题区：清晰层级 + 安全路径显示 -->
  <div class="mb-6">
    <div class="flex items-center space-x-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 2 9 18zm0 0v-8" />
      </svg>
      <h1 class="text-2xl sm:text-3xl font-extrabold text-gray-900">模板管理</h1>
    </div>
    <div class="mt-1 text-sm text-gray-500 flex items-center space-x-2 flex-wrap">
      <span>修改「{{ problem.title }}」的模板内容</span>
      <span class="px-2 py-1 bg-blue-50 text-blue-600 rounded-md font-medium text-xs sm:text-sm">
        {% set file_path = g.template_abs_path|e %}
        {% set file_name = file_path.split('/')[-1] if file_path else '未知文件' %}
        {{ file_name }}
      </span>
    </div>
    <div class="mt-2 text-xs text-gray-400 overflow-x-auto whitespace-nowrap">
      <span class="text-gray-500">路径：</span>{{ g.template_abs_path|e }}
    </div>
  </div>

  <!-- 表单：与后端路由完全同步 -->
  <form method="post" class="bg-white rounded-lg shadow-md overflow-hidden">
    <!-- CSRF令牌：必须与后端匹配 -->
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    
    <!-- 代码编辑区：行号同步 + 编辑器体验 -->
    <div class="flex overflow-hidden border-b">
      <!-- 行号区域 -->
      <div class="w-10 bg-gray-50 text-gray-400 text-right px-2 py-3 font-mono text-xs overflow-y-auto" id="line-numbers"></div>
      <!-- 代码输入区 -->
      <textarea 
        name="templates[cpp]" 
        rows="20" 
        class="w-full border-0 bg-gray-50 text-sm font-mono px-2 py-3 focus:outline-none"
        style="resize: none; line-height: 1.6; caret-color: #3b82f6;"
        id="code-editor"
        placeholder="请输入C++模板代码（如函数框架、头文件等）"
      >{{ templates.cpp | default('', true) }}</textarea>
    </div>

    <!-- 操作按钮：确保在form内且路径正确 -->
    <div class="mt-0 p-6 flex justify-end gap-4 bg-gray-50 border-t">
      <button type="submit" 
              class="bg-blue-600 text-white px-5 py-2 rounded-md hover:bg-blue-700 transition-colors focus:ring-2 focus:ring-blue-300">
        保存并覆盖原模板
      </button>
      <a href="{{ url_for('edit_problem', problem_id=problem.id) }}" 
         class="bg-gray-100 text-gray-700 px-5 py-2 rounded-md hover:bg-gray-200 transition-colors">
        返回编辑题目
      </a>
    </div>
  </form>
</div>

{% block extra_js %}
<script>
  // 行号实时同步逻辑
  const codeEditor = document.getElementById('code-editor');
  const lineNumbers = document.getElementById('line-numbers');
  
  // 初始化行号
  function renderLineNumbers() {
    const lines = codeEditor.value.split('\n').length;
    // 生成行号HTML（空行也保留行号）
    lineNumbers.innerHTML = Array.from({length: lines}, (_, i) => `<div>${i+1}</div>`).join('');
    // 滚动同步
    codeEditor.addEventListener('scroll', () => {
      lineNumbers.scrollTop = codeEditor.scrollTop;
    });
    lineNumbers.addEventListener('scroll', () => {
      codeEditor.scrollTop = lineNumbers.scrollTop;
    });
  }
  
  // 监听输入事件更新行号
  codeEditor.addEventListener('input', renderLineNumbers);
  // 页面加载时初始化
  window.addEventListener('DOMContentLoaded', renderLineNumbers);
</script>

<style>
  /* 滚动条美化 */
  #code-editor::-webkit-scrollbar,
  #line-numbers::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  #code-editor::-webkit-scrollbar-thumb,
  #line-numbers::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
  }
  #code-editor::-webkit-scrollbar-thumb:hover,
  #line-numbers::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
  }
  #code-editor::-webkit-scrollbar-track,
  #line-numbers::-webkit-scrollbar-track {
    background: transparent;
  }
</style>
{% endblock %}
{% endblock %}
